@import 'src/style/variable';

.self {
  width: calc(100% - 30px);
  margin: 0 auto;
  box-shadow: 0 8px 15px 0 #00000017;
  background-color: var(--modal-bg);
  border-radius: 5px;

  position: fixed;
  top: 15px;
  right: 15px;
  transition: top 0.3s;

  animation: fade-in 0.3s;

  @media (min-width: $xsmall) {
    width: 420px;
  }
}

.bar {
  height: 34px;
  box-sizing: border-box;
  padding: 5px;
  border-bottom: 1px solid var(--divider);
  display: flex;
  justify-content: flex-end;
  align-items: center;

  > img {
    height: 24px;
    cursor: pointer;
  }
}

.message {
  padding: 13px 10px 15px 15px;
  display: flex;
  gap: 10px;

  > div {
    flex: 1;
  }

  > img {
    width: 24px;
    align-self: flex-end;
    cursor: pointer;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
